深入解析Vue3中的响应式API：shallowReactive、shallowRef、triggerRef和customRef的使用与原理

篇首语：本文由编程笔记#小编为大家整理，主要介绍了Vue3中 响应式 API（ shallowReactiveshallowReftriggerRef customRef ）详解相关的知识，希望对你有一定的参考价值。

传送门&＃xff1a;Vue3中 响应式API ( reactive、ref、toRef、toRefs ) 详解

1. shallowReactive 函数

reactive() 的浅层作用形式。
只处理对象最外层属性的响应式&＃xff08;浅响应式&＃xff09;。
应用场景&＃xff1a; 如果一个对象属性数据&＃xff0c;结构较深&＃xff0c;但变化时只是外层属性变化。

<template>
<div>
<div>
obj1.name obj1.info.age
<button &＃64;click&＃61;"obj1Age">obj1Age</button>
</div>
<div>
obj2.name obj2.info.age obj2.money
<button &＃64;click&＃61;"obj2Age">obj2Age</button>
</div>
</div>
</template>
<script>
import reactive,shallowReactive from &＃39;vue&＃39;;
export default
setup()
const obj1 &＃61; reactive(
name:&＃39;张三&＃39;,
info:
age:18

)
const obj2 &＃61; shallowReactive(
name:&＃39;李四&＃39;,
money:100,
info:
age:18

)
const obj1Age &＃61; () &＃61;>
obj1.info.age&＃43;&＃43;;

const obj2Age &＃61; () &＃61;>
//obj2.money&＃43;&＃43;; // 放开注释视图才会进行更新&＃xff08;原因是 shallowRefState 首层 value 发生了改变&＃xff09;
obj2.info.age&＃43;&＃43;;
console.log(obj1,obj2)

return
obj1,
obj2,
obj1Age,
obj2Age,



</script>


先触发 obj1Age 两次&＃xff0c;再触发 obj2Age 两次。

2. shallowRef 函数

ref() 的浅层作用形式。

• shallowRef() 函数是浅层响应&＃xff0c;只有对 value 整体修改&＃xff0c;才能更新到视图层&＃xff1b;
• 对属性值的修改是可以的&＃xff0c;只是不更新到视图层&＃xff1b;
• 对属性值修改之后&＃xff0c;可通过 triggerRef() 函数手动更新到视图&＃xff1b;

应用场景&＃xff1a; 如果一个对象属性数据&＃xff0c;后续功能不会修改该对象中的属性&＃xff0c;而是新生对象来替换。

<template>
<div>
<div>
count
<button &＃64;click&＃61;"changeCount">changeCount</button>
</div>
<div>
count2.num
<button &＃64;click&＃61;"changeCount2">changeCount2</button>
</div>
<div>
count3.num
<button &＃64;click&＃61;"changeCount3">changeCount3</button>
</div>
<div>
count4.num
<button &＃64;click&＃61;"changeCount4">changeCount4</button>
</div>
</div>
</template>
<script>
import shallowRef,triggerRef from &＃39;vue&＃39;;
export default
setup()
const count &＃61; shallowRef(0);
const count2 &＃61; shallowRef( num:0 );
const count3 &＃61; shallowRef( num:0 );
const count4 &＃61; shallowRef( num:0 );
const changeCount &＃61; () &＃61;>
count.value&＃43;&＃43;

// 只更改num属性值&＃xff0c;不会更新视图
const changeCount2 &＃61; () &＃61;>
count2.value.num&＃43;&＃43;;
console.log(&＃39;count2&＃39;,count2)

// 整体更新value&＃xff0c;会更新视图
const changeCount3 &＃61; () &＃61;>
count3.value &＃61; num: 10

// 手动更新视图
const changeCount4 &＃61; () &＃61;>
count4.value.num&＃43;&＃43;;
triggerRef(count4)

return
count,
count2,
count3,
count4,
changeCount,
changeCount2,
changeCount3,
changeCount4,



</script>


只触发 changeCount2 两次&＃xff08;未触发其他方法&＃xff0c;防止视图更新&＃xff09;

3. triggerRef 函数

强制触发依赖于一个浅层 ref 的副作用&＃xff0c;这通常在对浅引用的内部值进行深度变更后使用。

• 手动执行与 shallowRef 关联的任何作用 (effect)&＃xff1b;
• 配合 shallowRef 用的&＃xff0c;并且 shallowRef 传入的是个引用类型&＃xff1b;

<template>
<div>
<div>
count4.num
<button &＃64;click&＃61;"changeCount4">changeCount4</button>
</div>
</div>
</template>
<script>
import shallowRef,triggerRef from &＃39;vue&＃39;;
export default
setup()
const count4 &＃61; shallowRef( num:0 );
// 手动更新视图
const changeCount4 &＃61; () &＃61;>
count4.value.num&＃43;&＃43;;
console.log(count4);
triggerRef(count4);

return
count4,
changeCount4,



</script>


只触发 changeCount4 两次

注意&＃xff1a;没有 triggerReactive

4. customRef 函数

创建一个自定义的 ref&＃xff0c;显式声明对其依赖追踪和更新触发的控制方式。

function customRef<T>(factory: CustomRefFactory<T>): Ref<T>
type CustomRefFactory<T> &＃61; (
track: () &＃61;> void,
trigger: () &＃61;> void
) &＃61;>
get: () &＃61;> T
set: (value: T) &＃61;> void



customRef() 预期接收一个工厂函数作为参数&＃xff0c;这个工厂函数接受 track 和 trigger 两个函数作为参数&＃xff0c;并返回一个带有 get 和 set
方法的对象。
一般来说&＃xff0c;track() 应该在 get() 方法中调用&＃xff0c;而 trigger() 应该在 set() 中调用。然而事实上&＃xff0c;你对何时调用、是否应该调用他们有完全的控制权。

<template>
<input type&＃61;"text" v-model&＃61;"keyWord">
<h3> keyWord </h3>
</template>
<script>
import ref,customRef from &＃39;vue&＃39;;
export default
setup()
function myRef(value,delay &＃61; 200)
let timer &＃61; null;
// return 指代 把自定义的ref函数交出去
return customRef((track,trigger) &＃61;>
// return 指代 customeRef 形参中的返回体必须返回一个对象&＃xff0c;所以必须写return
return
get()
console.log(&＃39;从myRef中读取值&＃39;,value); // 因为模板

和输入框各读取了一次keyWord属性,所以打印2次
track();// 通知 Vue 追踪 value 的变化
return value
,
set(newVal)
// myRef(value)中的形参value代表调用自定义函数传入的参数&＃xff0c;而set(newValue)中的newValue代表input输入框修改后的值。
console.log(&＃39;设置值&＃39;,newVal)
clearTimeout(timer);
timer &＃61; setTimeout(() &＃61;>
value &＃61; newVal;
trigger(); // 通知 Vue 重新解析模板
,delay)


)

let keyWord &＃61; myRef(&＃39;hello&＃39;,300);
return
keyWord



</script>


效果&＃xff1a;